<template>
  <a-drawer title="乐管家详情" placement="right" :visible="visible" :width="500" @close="close">
    <a-spin :spinning="loading">
      <a-descriptions :column="1">
        <a-descriptions-item label="昵称">{{ steward.name }}</a-descriptions-item>
        <a-descriptions-item label="头像">
          <a-avatar shape="square" :size="32" icon="user" :src="steward.head_img" />
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-badge :status="checkStatusDisplay(steward.status)" :text="steward.status | checkStatusFilter"></a-badge>
        </a-descriptions-item>
        <a-descriptions-item label="手机号">{{ steward.mobile }}</a-descriptions-item>
        <a-descriptions-item label="家庭住址">{{ steward.family_address }}</a-descriptions-item>
        <a-descriptions-item label="申请住址">{{ steward.apply_address }}</a-descriptions-item>
        <a-descriptions-item label="所属门店" v-if="steward.store && steward.store.name">{{
          steward.store.name
        }}</a-descriptions-item>
        <a-descriptions-item label="门店类型" v-if="steward.store_type">{{
          STORE_TYPE_MAP[steward.store_type]
        }}</a-descriptions-item>
        <a-descriptions-item label="门店照片">
          <img :src="steward.shop_img" @click="showPre(steward.shop_img)" />
        </a-descriptions-item>
        <a-descriptions-item label="营业执照">
          <img :src="steward.license_img" @click="showPre(steward.license_img)" />
        </a-descriptions-item>
        <a-descriptions-item label="身份证正面">
          <img :src="steward.id_front_img" @click="showPre(steward.id_front_img)" />
        </a-descriptions-item>
        <a-descriptions-item label="身份证正面">
          <img :src="steward.id_back_img" @click="showPre(steward.id_back_img)" />
        </a-descriptions-item>
        <a-descriptions-item label="简介" v-if="steward.brief">{{ steward.brief }}</a-descriptions-item>
      </a-descriptions>
    </a-spin>
    <pre-modal ref="preModal"></pre-modal>
  </a-drawer>
</template>

<script>
import { userStewardDetail } from '@/api/stat'
import { STORE_TYPE_MAP } from '@/mixins/storeType'
import PreModal from '@/components/pre-modal'

const CHECK_STATUS_MAP = {
  1: '乐管家',
  2: '审核中',
  3: '已拒绝',
  4: '已过期'
}

const CHECK_STATUS_DISPLAY = {
  1: 'success',
  2: 'processing',
  3: 'error',
  4: 'error'
}
export default {
  components: {
    PreModal
  },
  data () {
    return {
      visible: false,
      steward: {},
      STORE_TYPE_MAP,
      loading: false
    }
  },
  filters: {
    checkStatusFilter (status) {
      return CHECK_STATUS_MAP[status]
    }
  },
  methods: {
    showPre (src) {
      this.$refs.preModal.preview(src)
    },
    open (record) {
      this.visible = true
      this.loading = true
      if (record.id) {
        userStewardDetail({ id: record.id }).then(res => {
          this.steward = { ...record, ...res.data.data }
        }).finally(() => (this.loading = false))
      }
    },
    close () {
      this.visible = false
    },
    checkStatusDisplay (status) {
      return CHECK_STATUS_DISPLAY[status]
    }
  }
}
</script>

<style scoped>
img {
  border-radius: 8px;
  width: 100px;
}
</style>
